import { PlusOutlined } from '@ant-design/icons';
import { Button, Form, Radio, Select, Tag } from 'antd';
import cloneDeep from 'lodash/cloneDeep';
const { Item: FormItem, List: FormList } = Form;

import './GroupTagFilter.css';

const logicOptions = [
  { label: '交', value: 'and' },
  { label: '并', value: 'or' },
  { label: '差', value: 'not' },
];

const GroupTagFilter = ({
  filterOptions,
  allOptions,
  form,
  handleValueChange,
}) => {
  return (
    <div
      style={{
        display: 'flex',
        width: '100%',
        alignItems: 'center',
        padding: '5px',
      }}
    >
      <FormList name="level1List" rules={[{ required: true }]}>
        {(fields, { add }) => {
          return (
            <div style={{ width: '100%' }}>
              {fields.map((field, index) => {
                return (
                  <div key={index}>
                    {index > 0 && (
                      <div
                        style={{
                          width: '100%',
                          display: 'flex',
                          justifyContent: 'center',
                        }}
                      >
                        <FormItem
                          fieldKey={[field.fieldKey, 'first']}
                          name={[field.name, 'logic']}
                          key={field.key}
                        >
                          <Radio.Group
                            options={logicOptions}
                            buttonStyle="solid"
                            optionType="button"
                          />
                        </FormItem>
                      </div>
                    )}
                    <FormItem
                      fieldKey={[field.fieldKey, 'second']}
                      key={field.key}
                      name={field.key}
                      style={{
                        width: '100%',
                        padding: '10px',
                        border: '1px dashed gray',
                        margin: '5px',
                      }}
                    >
                      <GroupTagFilterItem
                        level1FieldName={field.name}
                        level1FieldKey={field.key}
                        filterOptions={filterOptions}
                        allOptions={allOptions}
                        form={form}
                        handleValueChange={handleValueChange}
                      />
                    </FormItem>
                  </div>
                );
              })}
              <div
                style={{
                  width: '100%',
                  justifyContent: 'center',
                  display: 'flex',
                }}
              >
                <Button
                  onClick={() => add()}
                  type="primary"
                  style={{
                    borderRadius: '50%',
                    width: '40px',
                    height: '40px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    margin: '5px',
                  }}
                >
                  <PlusOutlined />
                </Button>
              </div>
            </div>
          );
        }}
      </FormList>
    </div>
  );
};

// 一行的 Select
const GroupTagFilterItem = ({
  level1FieldName,
  level1FieldKey,
  filterOptions,
  allOptions,
  form,
  handleValueChange,
}) => {
  return (
    <FormList name={[level1FieldName, 'level2List']}>
      {(level2Fields, { add }) => {
        return (
          <div style={{ display: 'flex', flexWrap: 'wrap', width: '100%' }}>
            {level2Fields.map((level2Field, index) => {
              const { fieldKey } = level2Field;
              return (
                <div
                  style={{ display: 'flex', alignItems: 'center' }}
                  key={level2Field.key}
                >
                  {index > 0 && (
                    <div
                      style={{
                        width: '30px',
                        height: '30px',
                        borderRadius: '50%',
                        background: '#1890ff',
                        color: 'white',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}
                    >
                      并
                    </div>
                  )}
                  <div
                    style={{
                      width: 'fit-content',
                      margin: '5px',
                    }}
                  >
                    <MultiLineSelect
                      filterOptions={filterOptions}
                      allOptions={allOptions}
                      level1FieldKey={level1FieldKey}
                      level2FieldKey={fieldKey}
                      form={form}
                      handleValueChange={handleValueChange}
                    />
                  </div>
                </div>
              );
            })}
            <FormItem
              style={{
                display: 'flex',
                alignItems: 'center',
                marginLeft: '20px',
              }}
            >
              <Button type="primary" onClick={() => add()}>
                添加
              </Button>
            </FormItem>
          </div>
        );
      }}
    </FormList>
  );
};

const MultiLineSelect = (props) => {
  // select只支持增加，不能删除，所以 select 这么写是没什么问题的
  const {
    value,
    filterOptions,
    allOptions,
    form,
    level1FieldKey,
    level2FieldKey,
    handleValueChange,
  } = props;
  return (
    <Select
      mode="multiple"
      className="Label-multiLineSelect"
      style={{
        minWidth: 200,
        maxWidth: '',
        flexWrap: 'wrap',
        flexDirection: 'column',
      }}
      options={filterOptions}
      value={value}
      onChange={(v) => {
        // 因为 antd 对嵌套表单的支持是有问题的，所以这个输入直接用
        const { level1List } = form.getFieldsValue();
        const nextLevel1List = cloneDeep(level1List);
        nextLevel1List[level1FieldKey] = level1List[level1FieldKey] ?? {
          level2List: [],
        };
        nextLevel1List[level1FieldKey].level2List =
          nextLevel1List[level1FieldKey].level2List ?? [];
        nextLevel1List[level1FieldKey].level2List[level2FieldKey] = v;
        form.setFieldsValue({ level1List: nextLevel1List });
        handleValueChange();
      }}
      tagRender={(props) => {
        const { value, label, onClose } = props;
        const finalLabel =
          allOptions.find((option) => option.value === value)?.label ?? label;
        return (
          <div>
            <Tag
              style={{
                width: 'fit-content',
                display: 'flex',
                alignItems: 'center',
                margin: '2px',
              }}
              onClose={onClose}
              closable
            >
              <div
                style={{
                  flex: 1,
                  height: '20px',
                  display: 'flex',
                  alignItems: 'center',
                }}
              >
                {finalLabel}
              </div>
            </Tag>
          </div>
        );
      }}
    />
  );
};

export default GroupTagFilter;
